<template>
	<!-- #ifdef H5||APP-PLUS -->
	<view :class="['navbar',scrollTop > 40?'navbar-write':'']">
		<view class="navbar-content u-flex-between" :style="{paddingTop:appletTop+'px'}">
			<view class="left u-flex">
				<view class="userinfo u-flex"
					@click="isLogin || $getCache('user_type') != 2?$navigateTo('/subPackages/userInfo/index'):''">
					<u-avatar :src="isLogin?userInfo.avatar:$getSystemConfig('platform_logo_img')"
						size="100rpx"></u-avatar>
					<view class="userinfo-content">
						<view class="userinfo-data">
							<view class="nickname" v-if="isLogin">{{userInfo.nickname}}</view>
							<view class="no-nickname" @tap="$navigateTo('/subPackages/login/login')" v-else>登录/注册</view>
							<view class="create-time" v-if="isLogin && userInfo.userGrade">
								等级：{{userInfo.userGrade.name}}
							</view>
							<view class="create-time u-flex" v-if="isLogin && userInfo"
								@click.stop="$copyText(userInfo.id)">
								ID：{{userInfo.id}}<u-icon name="file-text" color="#9e9e9e" size="16">
								</u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="right u-flex-end">
				<view class="right-li u-flex">
					<image class="image" :src="$getImageUrl('/user_client/static/icons/shezhi.svg')"
						@click.stop="$navigateTo('/subPackages/user/setUp')" />
					<!-- 	<image class="icon" src="/static/icons/information.png"
						@click.stop="$navigateTo('/subPackages/information/index')"></image>
					<badge top="-10rpx" right="0" :value="$store.state.socket.messageTotal"></badge> -->
				</view>
			</view>
		</view>
	</view>
	<!-- #endif -->
</template>
<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: "navbar",
		data() {
			return {
				appletHeight: 0,
				appletTop: 0
			};
		},
		// 此处定义传入的参数
		props: {
			scrollTop: {
				type: Number,
				default: 0,
			},
		},
		mounted() {
			// #ifdef MP-WEIXIN
			// 小程序获取胶囊
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.appletHeight = menuButtonInfo.height
			this.appletTop = menuButtonInfo.top
			// #endif
		},
		computed: {
			// 获取消息总数
			...mapState('user', ['userInfo', 'isLogin'])
		},
		methods: {
			jump() {
				if (this.$isLogin()) {
					this.$navigateTo('/subPackages/userInfo/editUserInfo')
				} else {
					this.$navigateTo('/subPackages/login/login')
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.navbar-write {
		background-color: #FFFFFF;
		border-radius: 0 0 12rpx 12rpx;
		box-shadow: 0rpx 0rpx 6rpx 6rpx #f9f9f9;
	}

	.navbar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		/* #ifdef APP-PLUS || H5 */
		padding-top: var(--status-bar-height);
		/* #endif */

		.navbar-content {
			width: 100%;
			padding: 20rpx 30rpx;
			box-sizing: border-box;

			.left {
				.userinfo {
					/* #ifdef APP-PLUS || H5 */
					padding-top: 30rpx;
					/* #endif */
					/* #ifdef MP-WEIXIN */
					max-width: 600rpx;
					/* #endif */
					
					.userinfo-content {
						padding-left: 30rpx;

						.userinfo-top {

							.userinfo-data {
								line-height: 1;
								font-size: 30rpx;
								font-weight: bold;
							}

							.userinfo-grade {
								padding-left: 20rpx;
							}
						}

						.create-time {
							padding-top: 16rpx;
							font-size: 24rpx;
							line-height: 1;
							color: #4c4c4c;
						}
					}
				}
			}

			.right {
				position: relative;
				/* #ifdef APP-PLUS || H5 */
				padding-top: 30rpx;
				/* #endif */

				.right-li {
					margin-left: 50rpx;

					.image {
						width: 46rpx;
						height: 46rpx;
						display: block;
					}

					.icon {
						width: 46rpx;
						height: 46rpx;
						display: block;
						margin-left: 50rpx;
					}
				}
			}
		}
	}
</style>